<template>
  <BasicDrawer v-bind="$attrs" @register="register" title="营养食谱" width="30%">
    <Description
      size="middle"
      :title="title"
      :bordered="false"
      :column="1"
      :data="refundData"
      :schema="refundSchema"
    />
  </BasicDrawer>
</template>
<script lang="tsx" setup>
  import { ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { Description } from '@/components/Description';
  import { DescItem } from '@/components/Description';
  import { exerciseTypeOption, getLabelByValue } from '@/views/nutrition/help/dict';
  import { getPhotoUrl } from '@/api/sys/upload';

  const title = ref('Drawer Title');

  //   {
  //     field: 'title',
  //     component: 'Input',
  //     label: '食谱名称',
  //     colProps: {
  //       span: 20,
  //     },
  //     rules: [{ required: true, message: '食谱名称不能为空' }],
  //   },
  //   {
  //     field: 'collocation',
  //     component: 'Input',
  //     label: '膳食搭配',
  //     colProps: {
  //       span: 20,
  //     },
  //     rules: [{ required: true, message: '课程名不能为空' }],
  //   },
  //   {
  //     field: 'dataId',
  //     component: 'ImageUpload',
  //     label: '膳食图鉴',
  //     colProps: {
  //       span: 20,
  //     },
  //     // rules: [{ required: true, message: '请上传课程封面' }],
  //     componentProps: {
  //       api: uploadApi,
  //     },
  //   },
  //   {
  //     field: 'recommend',
  //     component: 'Select',
  //     label: '饮食推荐',
  //     colProps: {
  //       span: 20,
  //     },
  //     componentProps: {
  //       options: exerciseTypeOption,
  //     },
  //   },
  //   {
  //     field: 'context',
  //     component: 'InputTextArea',
  //     label: '备注内容',
  //     colProps: {
  //       span: 20,
  //     },
  //   },

  const refundData = ref({
    title: '',
    collocation: '',
    dataId: '',
    recommend: '',
    context: '',
  });
  const refundSchema: DescItem[] = [
    // {
    //   field: 'title',
    //   label: '食谱名称',
    // },
    {
      field: 'collocation',
      label: '膳食搭配',
    },
    {
      field: 'dataId',
      label: '膳食图鉴',
      render: (text) => <img width={100} src={`${getPhotoUrl}${text}`}></img>,
    },
    {
      field: 'recommend',
      label: '饮食推荐',
      render: (text) => getLabelByValue(text, exerciseTypeOption),
    },
    {
      field: 'context',
      label: '备注内容',
    },
  ];
  const [register] = useDrawerInner(({ data }) => {
    console.log(data);
    if (data) {
      title.value = data.title;
      refundData.value = data;
    }
  });
</script>
